<template>
  <div>
    <div class="address-list init" @click="showAddress">
      <nut-button
          type="primary"
          shape="circle"
          small>
        {{title}}
      </nut-button>
    </div>

    <nut-address
        v-model="showPopup"
        :province="province"
        :city="city"
        :country="country"
        customAddressTitle="请选择所在地区"
        @onChange="onChange1"
        @close="close1">
    </nut-address>

  </div>
</template>

<script scoped>
import districts from "../plugins/districts";
export default {
  name: "AddAddress",
  props: {
    title:{
      type:String,
      default:'选择位置'
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      showPopup:false,
      province:[],
      city:[],
      country:[],
      town:[],
      text1:null,
      cityIndex:1,
      Address: {
        'province':'',
        'city':'',
        'country':''
      },
    }
  },
  methods: {
    showAddress(){
      this.showPopup = true
    },
    onChange1(cal){
      console.log(cal)
      if (this.cityIndex == 1) {
        this.city = this.getKeyOrValue(districts[cal.value.id]);
        this.cityIndex = 2;
        this.$forceUpdate();
        this.Address.province=cal.value.name;
      } else if (this.cityIndex == 2) {
        this.country = this.getKeyOrValue(districts[cal.value.id])
        this.cityIndex = 1;
        this.$forceUpdate();
        this.Address.city=cal.value.name;
      }
      if (this[cal.next].length < 1) {
        this.Address.country=cal.value.name;
        this.showPopup = false
        this.cityIndex = 1;
      }
    },
    close1(val){
      this.text1 = val.data.addressStr
      this.$emit('Address',this.Address)
    },
    getKeyOrValue(object) {
      let re = [];
      for (let props in object) {
        let i = {'id': props, 'name': object[props]}
        re.push(i)
      }
      return re;
    },

  },
  watch: {

  },
  mounted() {
    this.province = this.getKeyOrValue(districts["100000"])
  },
  created() {
  }
}
</script>

<style scoped>

</style>